<template>
  <div class="app-container customer-div">
    <el-dialog
      :close-on-click-modal="false"
      title="货源信息"
      :visible.sync="dialogVisible"
      width="800px">
      <el-row  :gutter="30">
        <el-col :span="14">
          <div class="adr-info">
            <div class="title">装货信息</div>
            <div class="con">
              <div class="big-font">{{ form.sendArea }}</div>
              <div class="small-font" >{{ form.sendAddress }}</div>
              <div class="small-font">装货时间： {{ form.loadTime }}</div>
            </div>
          </div>
          <div class="adr-info yellow" style="margin-top:30px">
            <div class="title">卸货信息</div>
            <div class="con">
              <div class="big-font">{{ form.receiveArea }}</div>
              <div class="small-font" >{{ form.receiveAddress }}</div>
              <div class="small-font">卸货时间： {{ form.unloadTime }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <el-form label-width="80px">
            <el-form-item label="车辆信息：" style="margin-bottom:0">{{form.lclCargo == 0 ? '整车' : '零担货源'}} / {{form.truckType}} / {{form.truckLength}}</el-form-item>
            <el-form-item label="货物信息：" style="margin-bottom:0">{{form.packingType}} / {{form.goodsName}} / {{form.goodsNum}}</el-form-item>
            <el-form-item label="备注：" style="margin-bottom:0">{{form.sourceRemark}}</el-form-item>
            <el-form-item label="运费信息：" style="margin-bottom:0">
              <div v-if="form.freightUnit == 2">
                {{ form.freightPrice }} /吨 <span style="padding-left:20px">合计：</span> <span style="color:red">￥ {{ form.freightAmount }}</span>
              </div>
              <div v-if="form.freightUnit == 1">
                {{ form.freightPrice }} /趟 <span style="padding-left:20px">合计：</span> <span style="color:red">￥ {{ form.freightAmount }}</span>
              </div>
            </el-form-item>
            <el-form-item label="订金：" style="margin-bottom:0">{{form.deposit}} / {{form.isReturnDeposit == 1 ? '退还':'不退还'}}</el-form-item>
            <el-form-item label="开票信息：" style="margin-bottom:0">{{form.isNeedInvoice == 1 ? '开发票' : '不开发票'}}</el-form-item>
            <el-form-item label="发布时间：" style="margin-bottom:0">{{form.createTime}}</el-form-item>
            <el-form-item label="发布人：" style="margin-bottom:0">{{form.createUserName}} / {{form.createUserMobile}}</el-form-item>
            <el-form-item label="状态：" style="margin-bottom:0">{{form.sourceState | fifstate}}</el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible=false">关 闭</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading" v-if="isShowXiaJia == 1 && form.sourceState == 0">下 架</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { sourceInfo} from "../../api/partner";

export default {
  name: "sendGoods",
  data(){
    return {
      dialogVisible:false,
      btnLoading:false,
      form:{},
      isShowXiaJia:''
    }
  },
  components : {

  },
  computed: {

  },
  filters:{
    fifstate(val){
      if(val == 0){
        return '上架中'
      }else if(val == 10){
        return '自动下架'
      }else if(val == 20){
        return '手动下架'
      }else if(val == 30){
        return '已成交'
      }
    },
  },
  created() {

  },
  methods:{

    //显示货源详情
    showPop(item,type){
      this.dialogVisible = true;
      this.isShowXiaJia = type;
      sourceInfo({sourceId:item.sourceId}).then((res)=>{
        this.form = res;
      })
    },

    //关闭货源详情
    handleClose(){
      this.dialogVisible = false;
    },

    //下架货源详情
    handleConfirm(){
      this.dialogVisible = false;
      this.$emit("handleConfirm",this.form)
    },
  },
}
</script>

<style scoped lang="scss">
    .chexing-con{
      .chexing-title{
          font-weight: bold;
          font-size:14px;
          margin-bottom:10px;
      }
      .chexing-item-list{
        overflow: hidden;
        .chexing-item{
          display: inline-block;
          width:80px;
          height:30px;
          line-height: 30px;
          background: #eee;
          text-align: center;
          color:#666;
          margin-right:10px;
          margin-bottom:10px;
          cursor: pointer;
        }
        .chexing-item.choose{
          background: #f56c6c;
          color:#fff
        }

      }
    }
</style>
